import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import { Row,Col,Card,Tabs,Button,Icon } from 'antd'
import { routerRedux } from 'dva/router'
import List from './List'
import Search from './searchBottom'
import Header from './header'
import Modal from './modal'
import ChangeList from './changeList'
import ChangeHistory from './changeHistory'
import ChangeDetails from './changeDetails'

const FileChange = ({location,dispatch,fileChange,loading}) =>{
	const { list,visible,menu,params,details,userList,pagination,isNew,
		goList,goHistory,goDetails,list2,pagination3,historyDetails,title,infoDetais1} = fileChange
	const { query, pathname } = location
	// console.log(pagination)
	const modalProps = {
		visible,
		details,
		userList,
		isNew,
		onOk(){
			dispatch({
				type:'fileChange/onModalOk',
				payload:{}
			})
		},
		onCancels(){
			dispatch({
				type:'fileChange/onCancels',
				payload:{}
			})
		},
		onComponent(payload){
			dispatch({
				type:'fileChange/applicationSave',
				payload:{
					...payload
				}
			})
		},	
		onComponentUpdate(payload){
			dispatch({
				type:'fileChange/applicationUpdate',
				payload:{
					...payload
				}
			})
		},
	}
	const listProps = {
		list,
		menu,
		pagination,
		showModals(type){
			dispatch({
				type:'fileChange/showModal',
				payload:{
					name:type
				}
			})
		},
		showDet(params){
			dispatch({
				type:'fileChange/showDet',
				payload:{
					...params
				}
			})
		},
		onPageChange(page){
			const { query, pathname } = location
          	dispatch({
                type: 'fileChange/searchList',
                payload: {
                  ...params,
                  page: page.current,
                	  pageSize: page.pageSize,
                	  
                	  
                }
              })
	       },		
	}
	const headerProps = {
		menu,
		pagination,
		showMenu(id){
			dispatch({
				type:'fileChange/showMenu',
				payload:id
			})
		},
		changeType(key){
			let menu = key.menu
			dispatch(routerRedux.push({
				pathname:pathname,
				query:{
					...query,
					menu
				}
			}))
		},
		onSearch(params){
			dispatch({
				type:'fileChange/searchList',
				payload:{
					...params
				}
			})
		},
		goList(){
			dispatch({
				type:'fileChange/goList1'
			})
		}
	}
	const searchProps = {
		menu,
		userList,
		onSearch(params){
			dispatch({
				type:'fileChange/searchList',
				payload:{
					...params
				}
			})
		},
	}
	const changeListProps = {
		list,
		menu,
		pagination,
		onPageChange(page){
			const { query, pathname } = location
          	dispatch({
                type: 'fileChange/searchList',
                payload: {
                  ...params,
                  page: page.current,
                	  pageSize: page.pageSize,
                	  
                	  
                }
            })
		},
		goHistory1(data){
			dispatch({
				type: 'fileChange/getHistory',
				payload:{
					documentId:data.id
				}
			})
			dispatch({
				type:'fileChange/getName',
				payload:{
					title:data.title
				}
			})
		}
	}
	const changeHistoryProps = {
		historyDetails,
		// goDetails(){
		// 	dispatch({
		// 		type:"fileChange/goDetails1"
		// 	})
		// }
		goDetails(id){
			dispatch({
				type:"fileChange/getDetails",
				payload:{
					changeId:id
				}
			})
		}
	}
	const changeDetailsProps = {
		infoDetais1
	}
	const returnback = () => {
		dispatch({
			type:'fileChange/returnback',
		})
	}
	const returnList = () => {
		dispatch({
			type:'fileChange/returnList'
		})
	}
	const returnHistory  = () => {
		dispatch({
			type:'fileChange/returnHistory'
		})
	}
	return(
      <div className="content-inner" style={{backgroundColor:'transparent',padding:0}}>
		{goList == false?
		<div>
			<Header {...headerProps}/>
    			{menu == 0 ?
    				<Search {...searchProps}/>:
    				""
    			}
      		<List {...listProps}/>
      		{/* <Modal {...modalProps}/> */}
			{visible && <Modal {...modalProps}/>}
			{/*<Modal />
			{modalVisible && <ModalList {...contractModalProps}/>}*/}
		</div>
		:
		goHistory == false ?
		<div>
			<div>	
				<Button 
					style={{marginBottom:20}}
					onClick={returnback}
				>
					<Icon type="left-circle-o" />
					返回
				</Button>
			</div>	
			<Search {...searchProps}/>
			<ChangeList {...changeListProps}/>
		</div>:
		goDetails == false?
		<div>
			<div style={{marginBottom:20,display:"flex",alignItems:"center"}}>	
				<Button 
					onClick={returnList}
				>
					<Icon type="left-circle-o" />
					返回
				</Button>
				<p style={{marginLeft:20,color:"#008cec"}}>档案名称:{title}</p>
			</div>
			<ChangeHistory {...changeHistoryProps}/>
		</div>:
		<div>
			<div style={{marginBottom:20,display:"flex",alignItems:"center"}}>	
				<Button 
					onClick={returnHistory}
				>
					<Icon type="left-circle-o" />
					返回
				</Button>
				<p style={{marginLeft:20,color:"#008cec"}}>档案名称:{title} 历史版本:测试版本001</p>
			</div>
			<ChangeDetails {...changeDetailsProps}/>
		</div>
		
		}
		
      	
      </div>		
	)
}

export default connect(({ fileChange, loading }) => ({ fileChange, loading }))(FileChange)
